<template>
  <!-- 表格部分 -->
  <el-table
    :data="tableData"
    :row-class-name="tableRowClassName"
    style="width: 100%"
  >
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="type" label="操作类型" width="180" />
    <el-table-column prop="studentName" label="姓名" />
    <el-table-column prop="studentId" label="对应学生学号" width="180" />
    <el-table-column prop="operator" label="操作人" width="180" />
    <el-table-column prop="operatorId" label="操作人工号" />
    <el-table-column prop="time" label="操作时间" />
  </el-table>

  <!-- 分页部分 -->
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="totalItems"
    @current-change="handlePageChange"
    layout="total, prev, pager, next, jumper"
  ></el-pagination>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

// 定义用户接口
interface User {
  id: number;
  type: string;
  studentName: string;
  studentId: string;
  operator: string;
  operatorId: string;
  time: string;
  color: number; // 用于行颜色标识
}

// 响应式变量
const tableData = ref<User[]>([]);
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示的条目数
const totalItems = ref(0); // 总数据条数

const MY_URL = "http://localhost:8080/api/journal";

// 获取日志数据的函数
const getJournal = (page: number, size: number) => {
  axios
    .get(`${MY_URL}/getJournal`, {
      params: {
        page: page,
        size: size,
      },
    })
    .then((response) => {
      console.log("响应数据：", response.data); // 打印响应数据，检查数据格式
      if (response.data && response.data.items && response.data.total !== undefined) {
        tableData.value = response.data.items; // 分页数据
        totalItems.value = response.data.total; // 总条目数
      } else {
        ElMessage.error("数据格式错误");
      }
    })
    .catch((err) => {
      console.error("数据获取失败:", err);
      ElMessage.error("数据获取失败");
    });
};

// 表格行样式设置
function tableRowClassName({ row }: { row: User }) {
  console.log("Row color:", row.color); // 检查每一行的 color 值
  const rowClassMap: Record<number, string> = {
    0: "warning-row",
    1: "success-row",
    2: "primary-row",
    3: "info-row",
    4: "danger-row",
    5: "error-row",
  };
  const className = rowClassMap[row.color] || ""; // 返回匹配的类名
  console.log("Class name for row:", className); // 检查返回的类名
  return className;
}


// 页面加载时调用数据获取函数
onMounted(() => {
  getJournal(currentPage.value, pageSize.value); // 初始化加载第一页数据
});

// 处理分页变更
const handlePageChange = (page: number) => {
  currentPage.value = page;
  getJournal(page, pageSize.value); // 获取新一页的数据
};
</script>

<style scoped>
/* 警告行 */
.el-table >>> .warning-row > td {
  background-color: var(--el-color-warning-light-9) !important;
}

/* 成功行 */
.el-table >>> .success-row > td {
  background-color: var(--el-color-success-light-9) !important;
}

/* 主要行 */
.el-table >>> .primary-row > td {
  background-color: var(--el-color-primary-light-9) !important;
}

/* 信息行 */
.el-table >>> .info-row > td {
  background-color: var(--el-color-info-light-9) !important;
}

/* 危险行 */
.el-table >>> .danger-row > td {
  background-color: var(--el-color-danger-light-9) !important;
}

/* 错误行 */
.el-table >>> .error-row > td {
  background-color: var(--el-color-danger-light-8) !important;
}

</style>
